<template>

    <div>
        <audio style="display:none;" ref="newmsg" src="../assets/2.mp3"></audio>
        <audio style="display:none;" ref="subscribe" src="../assets/1.mp3"></audio>
        <audio style="display:none;" ref="unsubscribe" src="../assets/3.mp3"></audio>

        <div id="loading" ref="pagesLoad" v-if="pagesLoad">
            <img src="../assets/aaa.svg"/>
        </div>
        <div class="main">
            <div class="left_box">
                <div class="btn_box">
                    <div class="item" @click="leftBarButton(index)" v-for="(item,index) in left_bar" :key="index">
                        <div class="icon" :style="'background:'+item.color">
                            <img :src="item.icon" alt="">
                        </div>
                        <span>{{item.text}}</span>
                    </div>
                </div>
                <div class="setting"  @click="settingButton"><img src="../assets/face.png" alt=""></div>
            </div>
            <div class="user_list">
                <div class="user_info">
                    <div class="headpic">
                        <img :src="cs_user.header_url ? URL.server+cs_user.header_url : 'http://suo.im/4nci1t'" alt="">
                    </div>
                    <span toindex="1" @click="openSetUserType" class="nickname" tabindex="0" hidefocus="true" @blur="set_user_type.status = false">
                        {{cs_user.nickname | limitLength(10)}} ({{cs_user.type == 1?'在线':cs_user.type == 2?'忙碌':'离线'}}) 
                        <Icon type="arrow-down-b"></Icon>
                        <div @click.stop="stopdefault" class="down_menu" :class="{open:set_user_type.status}">
                            <div class="item" @click="setUserType(1)"><Icon type="ios-checkmark" color="#07e118"></Icon>在线</div>
                            <div class="item" @click="setUserType(2)"><Icon type="ios-information" color="#fae900"></Icon>忙碌</div>
                            <div class="item" @click="setUserType(3)"><Icon type="ios-minus" color="#ff1c1c"></Icon>离线</div>
                            <div class="item" @ ="setUserType(4)">注销/切换</div>
                        </div>    
                    </span>
                </div>
                <div class="msg_user list_box" v-if="msg_user_list.status.isLoad">
                    <div class="item_list">
                        <div  v-for="(item,index) in msg_user_list.list" :key="index" class="item" :class="{active:item.user_id == msg_box_user.user.user_id}">
                            <div class="headpic">
                                <Badge :count="item.new_msg_num">
                                    <img src="http://suo.im/4nci1t" alt="">
                                </Badge>
                            </div>
                            <p class="info">
                                <span class="name">{{item.nickname | limitLength(13)}}</span>
                                <span class="time" v-if="item.msg_list.length > 0">
                                    {{item.msg_list[item.msg_list.length - 1].send_time | formatDate('hh:mm')}}
                                </span>
                            </p>
                            <p class="msg">
                                {{item.msg_list.length > 0 ? item.msg_list[item.msg_list.length - 1].content:''}}
                            </p>
                        </div>
                    </div>
                </div>
                <div class="user_box list_box" v-if="user_list.status.isLoad">
                    <div class="item_list">
                        <div v-for="(item,index) in user_list.list" :key="index" class="item">
                            <div class="headpic">
                                <img src="http://suo.im/4nci1t" alt="">
                            </div>
                            <p class="info">
                                <span class="name">{{item.nickname | limitLength(10)}}</span>
                                <span class="time" :type="item.subscribe">
                                    {{item.subscribe?'已关注':'取消关注'}}
                                </span>
                            </p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="msg_box"></div>
            <div class="right_box"></div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "Index",
        data() {
            return {
                pagesLoad:true,
                cs_user:{},
                set_user_type:{
                    status:false,
                    arr:[
                        {
                            name:'在线',
                            callback:this.setUserType,
                            type:1
                        },
                        {
                            name:'忙碌',
                            callback:this.setUserType,
                            type:2
                        },
                        {
                            name:'离线',
                            callback:this.setUserType,
                            type:3
                        }
                    ]
                },
                value_index:{
                    item_box:0
                },
                top_bar:{
                    text:'消息'
                },
                msg_user_list:{
                    status:{
                        isLoad:true
                    },
                    list:[]
                },
                user_list:{
                    status:{
                        isLoad:false
                    },
                    list:[]
                },
                msg_box_user:{
                    user:{user_id:34}
                },
                left_bar:[
                    {
                        text:'我的消息',
                        icon:require('../assets/tab01.png'),
                        color:'#fed68b',
                    },{
                        text:'最近联系',
                        icon:require('../assets/tab02.png'),
                        color:'#b04ee7'
                    },{
                        text:'联系人',
                        icon:require('../assets/tab03.png'),
                        color:'#94b8f7'
                    }   
                ]
            };
        },
        created: function() {
            window.$vm = window.$vm || {};
            $vm.Index = this;
            $vm.Index.$fn.isLogin((status)=>{
                if(status == -1){//当前未登陆
                    this.$router.push({path:'/login'})//跳转到登陆页面
                    return;
                }
                $vm.Index.cs_user = this.$fn.getCookie('user');
                $.get($vm.Index.URL.server+'/index/test/getButtInfo?butt_id='+$vm.Index.cs_user.id,function(res){
                    $vm.Index.user_list.list = res.msg;
                })
                $vm.Index.msg_user_list.list = $vm.Index.$fn.getMsgList($vm.Index.cs_user.id);
                $vm.Index.msg_user_list.list.forEach(function(item){
                    item.msg_list = [{
                        content:'最后一条消息',
                        send_time:1529979345
                    }]
                    item.new_msg_num = 1;
                });
                $vm.Index.$socket.emit('re_connect', {
                    user:$vm.Index.cs_user,type:$vm.Index.$fn.getLoginType()
                });
            });
        },
        methods:{
            leftBarButton:(index)=>{//左边按钮点击
                $vm.Index.msg_user_list.status.isLoad = false
                $vm.Index.user_list.status.isLoad = false;
                
                if(index == 0){
                    $vm.Index.msg_user_list.status.isLoad = true
                }else if(index == 1){
                    $vm.Index.user_list.status.isLoad = true;
                }
            },
            settingButton:()=>{//侧边设置按钮
                
            },
            openSetUserType:()=>{//点击打开状态下拉列表
                $vm.Index.set_user_type.status = !$vm.Index.set_user_type.status;
            },
            stopdefault:()=>{/*阻止事件冒泡*/},
            setUserType:(type)=>{//修改用户状态
                $vm.Index.set_user_type.status = false;
                if(type == $vm.Index.cs_user.type){
                    return;
                }
                if(type == 1){
                    $.get($vm.Index.URL.server+'/api/login/online',{id:$vm.Index.cs_user.id},function(res){
                        if(res.status == 1){
                            $vm.Index.cs_user.type = 1;
                            $vm.Index.$fn.setCookie('user',$vm.Index.cs_user);
                        }
                    });
                }else if(type == 2){
                    $.get($vm.Index.URL.server+'/api/login/busy',{id:$vm.Index.cs_user.id},function(res){
                        if(res.status == 1){
                            $vm.Index.cs_user.type = 2;
                            $vm.Index.$fn.setCookie('user',$vm.Index.cs_user);
                        }
                    });
                }else if(type == 3){
                    $.get($vm.Index.URL.server+'/api/login/outline',{id:$vm.Index.cs_user.id},function(res){
                        if(res.status == 1){
                            $vm.Index.cs_user.type = 3;
                            $vm.Index.$fn.setCookie('user',$vm.Index.cs_user);
                        }
                    });
                }else if(type == 4){
                    $vm.Index.loginOut();
                }
            },
            loginOut:function(){//退出登录
                $vm.Index.$fn.setCookie('secret',{});
                $vm.Index.$fn.setCookie('user',{});
                $vm.Index.$router.push({path:'/login'})
            },
            contextmenu:()=>{
                console.log(1111);
            },







            


            openUserMsg:function(index){//点击消息列表的用户
                var user = $vm.Index.msg_user_list.list[index]
                $vm.Index.msg_user_list.list[index].new_msg_num = 0;
                $vm.Index.$fn.updataMsgList($vm.Index.cs_user.id,$vm.Index.msg_user_list.list[index].user_id,$vm.Index.msg_user_list.list[index]);
                $vm.Index.$router.push({path:'/msgbox/'+user.user_id})

            },
            openUserListMsg:function(index){//点击联系人列表里面的用户
                $vm.Index.$fn.addMsgList($vm.Index.cs_user.id,$vm.Index.user_list.list[index]);
                $vm.Index.msg_user_list.list = $vm.Index.$fn.getMsgList($vm.Index.cs_user.id);
                // $vm.Index.$fn.setCookie('currentlyMsg',$vm.Index.user_list.list[index].user_id);
                $vm.Index.$router.push({path:'/msgbox/'+$vm.Index.user_list.list[index].user_id})//跳转到聊天页面
            },
            delUser:(index)=>{
                var result = $vm.Index.$fn.delMsgUser($vm.Index.cs_user.id,$vm.Index.msg_user_list.list[index]);
                if(result.status == 1){
                    $vm.Index.msg_user_list.list = result.list
                }
            }
        },
        sockets:{
            disConnects:function(){
                window.location.reload();
            },
            re_connect:(data)=>{
                console.log(data);
                if(data.status == 1){
                    $.get($vm.Index.URL.server+'/api/login/online',{id:$vm.Index.cs_user.id},function(res){
                        if(res.status == 1){
                            $vm.Index.cs_user.type = 1;
                            $vm.Index.$fn.setCookie('user',$vm.Index.cs_user);
                        }
                        $vm.Index.pagesLoad = false;
                        $vm.Index.$forceUpdate()
                    });
                }
            },
            sendMsg:(data)=>{
                console.log(data);
                data.send_state = 1;
                var isInUserList = null,
                    isInMsgUserList = null,
                    isInCurrently = null,
                    userInfo = null;
                
                $vm.Index.user_list.list.some(function(item,index){
                    if(item.openid == data.openid){
                        isInUserList = index
                        return true;
                    }
                    return false;
                })
                
                if(isInUserList != null){
                    userInfo = $vm.Index.user_list.list[isInUserList];
                }
                
                new Promise(function(success,error){
                    if(userInfo == null){
                        $.get($vm.Index.URL.server+'/api/User/getSqlUserInfo',{openid:data.openid},function(res){
                            userInfo = JSON.parse(res);
                            $vm.Index.user_list.list.push(userInfo);
                            success(userInfo);
                        }); 
                    }else{
                        success(userInfo);
                    }
                }).then((userInfo)=>{
                    $vm.Index.msg_user_list.list.some(function(item,index){
                        if(item.openid == data.openid){
                            isInMsgUserList = index
                            return true;
                        }
                        return false;
                    });
                    
                    if(isInMsgUserList == null){
                        $vm.Index.$fn.addMsgList($vm.Index.cs_user.id,userInfo);
                    }
                    var result = $vm.Index.$fn.addUserMsgList($vm.Index.cs_user.id,userInfo.user_id,data);
                    if(result.status == 1){
                        $vm.Index.msg_user_list.list = $vm.Index.$fn.getMsgList($vm.Index.cs_user.id);
                    }
                    if(data.type=="subscribe"){
                       $vm.Index.$refs.subscribe.play();
                    }else if(data.type=="unsubscribe"){
                       $vm.Index.$refs.unsubscribe.play();
                    }else{
                        $vm.Index.$refs.newmsg.play();
                    }
                })
            }
        }
    };
</script>

<style lang="less">
    *{font-family: 微软雅黑;}
    body{
        background:#f0eff4;
    }
    #loading{
        position: fixed;top:0;left:0;background:rgba(0,0,0,0.5);z-index: 99999;width:100%;height:100%;display:flex;
        transition: all 0.3s;opacity: 1;
        img{
            width:100px;height:100px;display:block;margin:auto;
        }
    }
    .main{
        position: fixed;width:972px;height:551px;background:#ffffff;top:50%;left:50%;transform: translate(-50%,-50%);
        border-radius:6px;
        .left_box{
            width:68px;height:100%;float:left;display:flex;position: relative;
            .setting{
                position: absolute;width:28px;height:28px;bottom:20px;left:50%;margin-left: -14px;cursor: pointer;
                img{
                    width:100%;height:100%;
                }
            }
            .btn_box{
                width:100%;height:auto;margin:auto;
                .item{
                    text-align:center;margin:34px 0;cursor: pointer;
                    .icon{
                        width:49px;height:49px;border-radius:50%;display:flex;margin:0 9px;
                        img{
                            width:28px;height:28px;margin:auto;
                        }
                    }
                    span{
                        color:#a4a4a4;font-size: 12px;
                    }
                }
            }
        }
        .user_list{
            width:220px;height:100%;float:left;
            .user_info{
                padding:21px 13px;font-size:0px;
                &::after{
                    content: "";display:block;clear: both;
                }
                .headpic{   
                    width:40px;height:40px;border-radius: 50%;float:left;margin-right: 16px;
                    img{
                        width:100%;height:100%;border-radius: 50%;
                    }
                }
                .nickname{
                    font-size: 12px;font-weight:600;color:#515151;line-height: 36px;cursor: pointer;
                    position: relative;display: inline-block;outline:none;
                    i{
                        padding-right: 8px;color:#939393;
                    }
                    .down_menu{
                        position: absolute;width:80px;line-height: 25px;top:30px;left:0;box-shadow:0 0 1px 1px #dadada;padding:5px 0;
                        transform-origin: top center;opacity: 0;transform:scaleY(0);transition:all 0.3s;background:#fff;z-index: 10;
                        &.open{
                            opacity: 1;transform:scaleY(1);
                        }
                        .item{
                            text-align: center;color:#939393;font-weight: 400;
                            i{
                                font-size: 14px;position: relative;top:1px;
                            }
                            &:hover{
                                background:#f3f3f3;
                            }
                        }
                        .line{
                            // width:100%;height:1px;background:#999;border-radius: 100%;
                            border:1px solid red;
                        }
                    }
                }
            }
            .list_box{
                margin:0 0 22px;height:447px;overflow: hidden;position: relative;
                &:hover{
                    overflow-y: auto;
                }
                &.user_box{
                    .item_list .item p.info{
                        padding-top: 0;line-height: 50px
                    } 
                    .item_list .item p.info .time{
                        display:inline-block;width:50px;font-weight: 600;
                        &[type="1"]{
                            color:#129b12;
                        }
                        &[type="0"]{
                            color:red;
                        }
                    }
                }
                .item_list{
                    padding:0 7px;width:calc(100% - 3px);
                    .item{
                        border-radius:5px;padding-right: 20px;cursor: pointer;margin:3px 0;height:55px;width:203px;
                        &.active{
                            background:#4282ee;
                        }
                        &.active:hover{
                            background:#4282ee;
                        }
                        &:hover{
                            background:#f0f5ff;
                        }
                        .headpic{
                            width:30px;height:30px;border-radius:50%;float:left;margin:12px 8px 12px 12px;background:none;border:none;
                            font-size: 0;
                            img{
                                width:100%;height:100%;border-radius:50%;
                            }
                            .ivu-badge-count{
                                min-width: 15px;min-height: 15px;line-height: 15px;height:15px;padding:0 2px;
                                transform: scale(1);top: -6px;right: -6px;border:none;border-radius: 100px;box-shadow:none;
                            }
                        }
                        &.active p{
                            color:#fff;
                        }
                        p{
                            font-size: 12px;color:#303030;margin:0;line-height: 15px;min-height:15px;
                            &.info{
                                padding-top: 12px;padding-left: 50px;
                                .name{
                                    display:inline-block;
                                    overflow: hidden;text-overflow: ellipsis;white-space: nowrap;
                                }
                                .time{
                                    display:inline-block;width:40px;float: right;text-align: center;height:15px;
                                }
                            }
                            &.msg{
                                overflow: hidden;text-overflow: ellipsis;white-space: nowrap;
                                padding-bottom: 10px;opacity: 0.8;
                            }
                        }

                    }
                }
            }
        }
        .msg_box{
            width:464px;height:100% ;float:left;background:#f6f6fc;
        }
        .right_box{
            width:220px;height:100%;float:left;
        }
    }
</style>
